<template>
    <div class="mobile-container">
        <!-- 头部导航 -->
        <div :class="['head-navigation']" ref="headNavigation" >
          <img :class="[logoStyle[channel], 'logo']" :src="!ifFilter?navLogo[channel].white:navLogo[channel].black" alt="">
          <img class="menu-icon" src="../assets/img/icon_gengduo@2x.png" alt="" @click="ifShowMenu=!ifShowMenu">          
        </div>
        <!-- 导航菜单 -->
        <div class="menu-groups" v-show="ifShowMenu">
            <div :class="['nav-btn']" v-for="(item, key) in mobileNavBtnsData" :key="key" @click="switchTab(item, key)">
              <div :class="['desc']" >
                  {{ item.desc }}
              </div>
              <img class="arrow-right" src="../assets/img/arrow_right.png" alt="" >
            </div>                  
            <!-- 语言选择 -->
            <div class="language_container"  > 
              <div :class="['lang_item', i1.ifCheck?'lang_active':'lang_noactive']" v-for="(i1,k1) in languageData" :key="k1" @click.stop="mobileLangSwitch(i1, k1)">
                {{ i1.name }}
                <span class="line" v-if="k1<languageData.length-1"></span>
              </div>
            </div>
        </div>
        <!-- 内容部分 -->
        <div class="content-part" @click="ifShowMenu=false" ref="contentPart">          
          <!-- 头部背景图 -->
          <div class="common-img-box head-img common-bg">
            <img class="bg1_img" src="../assets/img/img1_mobile.png" alt="">
            <!-- <img class="website_logo" src="../assets/img/logo_black.png" alt=""> -->
            <div class="app-name">Jumee</div>
            <div class="google_play" @click="jumpGoogle">
              <img class="left_icon" src="../assets/img/icon_google_mobile.png" alt="">
              <div class="right_text">
                Google Play
              </div>
            </div>
            <!-- 协议相关-->
            <div class="xieyi_part">
              <p class="text_link" v-for="(item,k) in xieyiData" :key="k">
                <a :href="`./${item.url}`" target="_blank">{{ item.text }}</a>
              </p>
            </div>
          </div>
          <!-- 背景图第二张 -->
          <div class="common-img-box two-img-box common-bg" >
            <div class="text-part">                  
              <p class="common_text_style">{{ $t('text3') }}</p>
              <p class="p1">{{ $t('text4') }}</p>
              <p class="p1">{{ $t('text5') }}</p>
            </div>
            <img class="bg2_img" src="../assets/img/img2_mobile.png" alt="">
          </div>
          <!-- 背景图第三张 -->
          <div class="common-img-box two-img-box common-bg" >
            <div class="text-part">                  
              <p class="common_text_style">{{ $t('text6') }}</p>
              <p class="p1">{{ $t('text7') }}</p>
              <p class="p1">{{ $t('text8') }}</p>
            </div>
            <img class="bg3_img" src="../assets/img/img3_mobile.png" alt="">
          </div>
          <!-- 背景图第四张 -->
          <div class="common-img-box two-img-box common-bg" >
            <div class="text-part">                  
              <p class="common_text_style">{{ $t('text9') }}</p>
              <p class="p1">{{ $t('text10') }}</p>
              <p class="p1">{{ $t('text11') }}</p>
            </div>
            <img class="bg3_img" src="../assets/img/img4.png" alt="">
          </div>
          <!-- 背景图第五张 -->
          <div class="common-img-box five-img-box common-bg-last">
            <img class="contact-us-icon" src="../assets/img/img5.png" alt="">
            <p class="contact_us">{{ $t('text12') }}</p>
            <p class="email">{{ $t('text13') }}diaryservice273@gmail.com</p>
            <!-- 底部备案部分 -->       
            <p class="beian_part" v-html="$t('text16')+'<br>'+$t('text19')"></p>   
          </div>
        </div>

    </div>
</template>

<script>

import mixins1 from '@/assets/js/mixins1';
export default {
  name: 'homePage',
  mixins: [mixins1],
  props: {
    terminalType: {
      type: Number,
      default: 1
    }
  },
  data() {
    // // 获取视口高度
    const viewportHeight = window.innerHeight;
    // 计算 `calc(100vh - 44px)` 的结果
    const result = viewportHeight - 44 ; 
    console.log(`calc(100vh - 44px) 的结果是: ${result}px`);
    // let count = result
    return {
      ifShowMenu: false,
      languageData: [],
      scrollDistance: {
        0: [],
        1: [],
        2: [],
        3: [],
        4: [],
        // 0: [0, count],          //tab1 [0,a]
        // 1: [count, count*2],    //tab2 [a, a*2]
        // 2: [count*2, count*3],  //tab3 [a*2, a*3]
        // 3: [count*3, count*4],  //tab4 [a*3, a*4]
        // 4: [count*4],           //tab5 [a*4]
      },
    }
  },
  created(){    
  },
  mounted() {
    const contentClient = this.$refs.contentPart.clientHeight;
    let menuData = Object.values(this.scrollDistance)
    let menuDataLen = menuData.length
    const itemcontentClient = contentClient / menuDataLen
    console.log('内容盒子的高度contentClient...........', contentClient, itemcontentClient, menuDataLen)
    menuData.forEach((item,key) => {
      if(key===0){
        item[0] = 0
        item[1] = itemcontentClient * (key+1)
      } else if(key<menuDataLen-1) {
        item[0] = itemcontentClient * key
        item[1] = itemcontentClient * (key+1)
      } else {
        console.log(key)
        item[0] = itemcontentClient * key
      }      
    })
    // console.log('scrollDistance........', this.scrollDistance)
  },
  watch: {
    // 监听 locale 的变化
    'ifShowMenu'(newVal, oldVal) {
        // console.log('监听到ifShowMenu变化........', newVal)
        if(newVal===true){
          document.getElementsByTagName('html')[0].style.overflow="hidden"
        } else {
          document.getElementsByTagName('html')[0].style.overflow="auto"
        }
    },
  },  
 
}
</script>

<style src="../iconfont/iconfont.css"></style>
<style lang="scss" scoped>
@import '../assets/css/common.scss';
@import '../assets/css/flash.css';
@import '../assets/css/mobile_page.scss';
</style>
